// 获取banner元素
var cur_ul = document.getElementById("banner");
var arr = new Array();

for (i = 1; i <= 4; i++) {

  var cur_li = document.createElement("li");

  var cur_img = document.createElement("img");
  // 给img元素设置src、width、height属性
  cur_img.src = "img/" + i + ".png";
  cur_img.style.width = "663px";
  cur_img.style.height = "376px";
  cur_img.style.left = "1000px";

  //节点设置
  cur_li.appendChild(cur_img);
  cur_ul.appendChild(cur_li);

  //鼠标移进来停止轮播
  cur_ul.onmouseenter = function () {
    clearInterval(timer);
  };
  // 鼠标移出ul继续轮播图片
  cur_ul.onmouseleave = function () {
    timer = setInterval(get_next, 3000);
  };
  //添加到arr数组
  arr.push(cur_li);
}

//轮播效果设置
var len = arr.length - 1;
arr[len - 2].style.left = "0px";
arr[len - 1].style.left = "200px";
arr[len].style.left = "400px";
//中间图片等比例放大
arr[len - 1].style.transform = "scale(1.3)";
arr[len - 1].style.zIndex = 100;

//创建出自动堆叠轮播图的效果
function get_next() {
  var give_up = arr[arr.length - 1];
  arr.pop();
  arr.unshift(give_up);
  for (var i = 0; i < arr.length; i++) {
    arr[i].style.zIndex = i;
    arr[i].style.transform = "scale(1)";
  }
  arr[len - 2].style.left = "0px";
  arr[len - 1].style.left = "200px";
  arr[len].style.left = "400px";
  arr[len - 1].style.transform = "scale(1.3)";
  arr[len - 1].style.zIndex = 100;
}

// 设置一个自动轮播定时器  触发get_next()
var timer = setInterval(get_next, 3000);

// 用js创建左箭头
var pre_img = document.createElement("img");
pre_img.src = "img/pre-icon.png";
pre_img.style.position = "absolute";
pre_img.style.width = "30px";
pre_img.style.top = "187px";
pre_img.style.bottom = 0;
pre_img.style.left = "83px";
pre_img.style.margin = "auto";
pre_img.style.zIndex = 100;
cur_ul.appendChild(pre_img);

// 用js创建右箭头
var next_img = document.createElement("img");
next_img.src = "img/next-icon.png";
next_img.style.position = "absolute";
next_img.style.width = "30px";
next_img.style.top = "187px";
next_img.style.bottom = 0;
next_img.style.right = "-179px";
next_img.style.margin = "auto";
next_img.style.zIndex = 100;
cur_ul.appendChild(next_img);

// 给箭头点击绑定事件
pre_img.onclick = function () {
  get_pre();
};
next_img.onclick = function () {
  get_next();
};

//点击箭头进行轮换
function get_pre() {
  var give_up = arr[0];
  arr.shift();
  arr.push(give_up);
  for (var i = 0; i < arr.length; i++) {
    arr[i].style.zIndex = i;
    arr[i].style.transform = "scale(1)";
  }
  arr[len - 2].style.left = "0px";
  arr[len - 1].style.left = "200px";
  arr[len].style.left = "400px";
  arr[len - 1].style.transform = "scale(1.3)";
  arr[len - 1].style.zIndex = 100;
}


// $("button").click(function () {
//   var height=document.createElement(".Download");
//   $(".Download").slideToggle(500, function () {
//     height.style.height = "656px";
//   })
// })

// $("button").click(function () {
//   var element = document.getElementById("Download");
//   var originalHeight = element.style.height;

//   element.style.height = "656px";
//   setTimeout(function () {
//     element.style.height = originalHeight;
//   }, 500);
// })


// const rotateImage = document.querySelector('.playOut');

// rotateImage.addEventListener('click', () => {
//  rotateImage.style.transform = `rotate(${rotateImage.style.transform.split('(')[1].split(')')[0] + 45}deg)`;
// });








